﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <!--<div class="navigation">
        <div style="margin-left: 40%">Home</div>
        <div>About us</div>
        <div>Projects</div>
        <div>Services</div>
        <div style="background-color: transparent; margin-top: 0px;">
            <input type="text" />
        </div>
    </div>-->
</body>
</html>
<script>
    var util = {
        getAbsoluteLeft: function (el) {
            var o = el;
            oLeft = o.offsetLeft;
            while (o.offsetParent != null) {
                oParent = o.offsetParent;
                oLeft += oParent.offsetLeft;
                o = oParent;
            }
            return oLeft;
        },
        getAbsoluteTop: function (el) {
            var o = el;
            oTop = o.offsetTop;
            while (o.offsetParent != null) {
                oParent = o.offsetParent;
                oTop += oParent.offsetTop;
                o = oParent;
            }
            return oTop;
        },
        getWidth: function (el) {
            return el.offsetWidth;
        },
        getHeight: function (el) {
            return el.offsetHeight;
        }
    }

    var data = [
    { key: "Home", items: [{ key: "Home-1", url: "http://www.baidu.com" }, { key: "Home-2", url: "http://www.baidu.com" }, { key: "Home-3", url: "http://www.baidu.com" }] },
    { key: "About us", items: [{ key: "About us-1", url: "http://www.baidu.com" }, { key: "About us-2", url: "http://www.baidu.com" }, { key: "About us-3", url: "http://www.baidu.com" }] },
    { key: "Projects", items: [{ key: "Projects-1", url: "http://www.baidu.com" }, { key: "Projects-2", url: "http://www.baidu.com" }, { key: "Projects-3", url: "http://www.baidu.com" }] },
    { key: "Services", items: [{ key: "Services-1", url: "http://www.baidu.com" }, { key: "Services-2", url: "http://www.baidu.com" }, { key: "Services-3", url: "http://www.baidu.com" }] },
    { key: "search", items: [] }
    ];
</script>
<script type="text/jsx">
    var ItemContainer = React.createClass({
        render:function(){
            var items = this.props.items;
            var self = this.props.el;
            var display = this.props.display;

            if(!self){
                return <div></div>
            }
            var left = util.getAbsoluteLeft(self);
            var top = util.getAbsoluteTop(self);
            var width = util.getWidth(self);
            var height = util.getHeight(self);
            var style={
                border:"1px solid red",
                display:display,
                position:'absolute',
                top:top+height,
                marginTop: 5,
                left:left,
                height:items.length*(20+5),
                width:width
            };
            var is = items.map(function(item){
                return <div className='marginTop'><a href={item.url}>{item.key}</a></div>
            });
            return <div style={style}>{is}</div>
        },
    })

    var Toolbar = React.createClass({
        getInitialState:function(){
            return {el:null,display:"none",selectedIndex:-1}
        },
        mouseOver:function(event){
            this.setState({el:event.target,display:"block",selectedIndex:event.target.getAttribute("data-index")});
        },
        mouseOut:function(event){
            this.setState({el:null,display:"none",selectedIndex:-1});
        },
        render:function(){
            var that = this;
            var items = this.props.data.map(function(item,index){
                if(index == 0){
                    return <div onMouseOut={that.mouseOut} onMouseOver={that.mouseOver} data-index={index} key={index} className="navFirstItem">{item.key}</div>
                }
                else if(index == that.props.data.length -1){
                    return <div key={index} className="navSearch"><input type="text" /></div>
                }
                else{
                    return <div data-index={index} onMouseOut={that.mouseOut} onMouseOver={that.mouseOver} key={index}>{item.key}</div>
                } 
            })
            var itemContainers = this.props.data.map(function(item,index){
                if(that.state.selectedIndex == index){
                    return <ItemContainer items={item.items} el = {that.state.el} display="block" />
                }else{
                    return <ItemContainer items={item.items} el = {that.state.el} display="none" />
                }
            });
            return (<div>
                        <div className="navigation">{items}</div>
                        <div>{itemContainers}</div>
                    </div>)
        }
    });

    React.render(
        <Toolbar data={data}/>,
        document.body
    )
</script>
